<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">

    <script th:src="@{js/jquery.min.js}"></script>
    <!--这里不用加/static,默认在里面找，加了反而报错-->
    <script th:src="@{js/bootstrap.min.js}"></script>
    <style>
        body{
            background-color: #555555;
        }
        .title{
            font-size: 20px;
        }
        .self{
            /*position: relative;*/
            margin: 100px;
            height: 100px;
            width: 1000px;
            background-color: white;
            color: #122b40;
        }
        .thumbs_photo{
            height: 24px;
            width: 24px;
        }
        .context{
            text-align: right;
        }
        .message{
            background-color: rgb(250,250,250);
        }
        .sort{
            width: 800px;
        }
        .rank{
            position: absolute;
            margin-left: 50px;
            font-size: 20px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand nav-tabs" th:href="@{/hello}">主页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
            </ul>
            <form class=" search_form navbar-form navbar-left color-input-field">
                <div class="form-group">
                    <input type="search" class="form-control search_passage" placeholder="搜索博客">
                </div>


                <button type="button" class="btn btn-default btn_search">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a th:href="@{/articleUp}"><span>文章发表</span></a></li>
                <li><a th:href="@{/self}">个人主页</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">账号管理 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/changeBlog}">切换账号</a></li>
                        <li><a th:href="@{/selfInfo}">编辑资料</a></li>
                        <li><a data-toggle="modal" data-target="#logout_account">注销</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a th:href="@{/changeBlog}">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--个人文章内容-->
<!--个人信息描述-->
<div class="container self">
    <span></span>
    <ol class="breadcrumb ol_li">
        <li><h3 th:text="${session.user.getUserName()}" style="display: inline-block;font-family: 华文细黑"></h3></li>
        <li><span style="font-family: 新宋体">博客号:[[${session.user.getUserBlog()}]]</span></li>
        <li><span style="font-family: 新宋体">博文:[[${blogs}]]条</span></li>
        <li><span style="font-family: 新宋体">点赞数:[[${stars}]]</span></li>
        <li><span>留言:</span></li>
    </ol>
</div>
<div class="container">
    <div class="title_tables">
    </div>
</div>
<nav aria-label="Page navigation  " class="col-md-offset-5 col-lg-4 " >
    <ul class="pagination pagination-lg pages_ul">
    </ul>
</nav>
<div class="modal fade" id="myModal" style="display: none" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="myModalLabel" style="color:
                     #31b0d5;text-align: center">确认删除</h2>
            </div>
            <form class="form-horizontal ">
                <h3 style="text-align: center" id = "to_check_delete"></h3>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary delete_passage_btn">删除</button>
                <button type="button" class="btn btn-default btn_close" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>

<!--注销模态款-->
<div class="modal fade" id="logout_account" style="display: none" tabindex="-1" role="dialog" aria-labelledby="logout_account">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="logout_header" style="color:
                     #31b0d5;text-align: center">尊敬的[[${session.user.userName}]]</h2>
            </div>
            <form class="form-horizontal" style="text-align: center">
                <div class="logout_password" style="margin-top: 10px">输入密码:<input class="logout_password_input" type="password"></div>
                <p class="tip_logout_error" style="display: none;margin-top: 10px;color: darkred">密码错误，注销失败</p>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn_logout">确认注销</button>
                <button type="button" class="btn btn-default btn_logout_close" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>


</body>
<!--获取后端session的值-->
<script th:inline="javascript" >
    var userId = [[${session.user.userId}]];
    var password = [[${session.user.userPassword}]];
    var userName = [[${userName}]];
    sessionStorage.setItem("userName",userName);
    sessionStorage.setItem("password",password);
    sessionStorage.setItem("userId",userId);
</script>
<script>
    var hashmap;
    var current_page;//当前页数
    var sum_page;
    //首次加载页面发送异步请求
    function getPageName() {
        $(".pages_ul").empty();
        $(".title_tables").empty();
        $.ajax({
            url: "/myBlog",
            type: "POST",
            data: {},
            dataType: "JSON",
            success: function (data) {
                console.log("data"+data);
                //设施描述
                $(".ol_li").append("<span id=\"self_desc\">"+ data +"</span>")
                AjAx(1);//刷新页面默认刷新页面，发送ajax
            }
        })
    }
    getPageName();

    //搜索功能
    $(".submit_search").click(function () {
        alert();
    })

    $(".admin_option").click(function (){
        $(".admin_option").css("pointer-events","visible");
    })

    //注销账号
    $(".btn_logout").click(function () {
        var password = $(".logout_password_input").val();
        var real_password = sessionStorage.getItem("password");
        if(password !== real_password){
            $(".tip_logout_error").css("display","block");
        }else{
            $(".tip_logout_error").css("display","none");
            //删除
            logout_ajax();
        }
    })

    //搜索功能
    $(".btn_search").click(function () {
        var search_blogId = $(".search_passage").val();
        $.ajax({
            url: "/search",
            type: "POST",
            data:{searchBlogId:search_blogId},
            datatype: "JSON",
            success: function (data) {
                if(data===-1){
                    alert("无该文章");
                    return false;
                }else{
                    window.location.href="/article?id="+ data;
                }
            }
        })
    })

    function logout_ajax(){
        $.ajax({
            url: "/logout",
            type: "POST",
            data:{userId:sessionStorage.getItem("userId")},
            dataType: "JSON",
            success: function (data) {
                alert("注销成功");
                window.location="/index";
            }
        })
    }

    //点赞功能
    $(".title_tables").on("click",".thumbs_href",function () {
        var index = $(this).attr("index");
        var c = $(this).children(".thumbs_photo");
        var display = c[0].style.display;
        if(display==="none"){
            c[0].style.display = "inline-block";
            c[1].style.display = "none";
            var val = $(this).siblings(".stars_num").text();
            var sum = Number(val);
            $(this).siblings(".stars_num").text(sum+1);
        }else{
            c[0].style.display = "none";
            c[1].style.display = "inline-block";
            var val = $(this).siblings(".stars_num").text();
            var sum = Number(val);
            $(this).siblings(".stars_num").text(sum-1);
        }
    })

    //自动发送ajax请求
    function AjAx(text) {
        $(".title_tables").empty();
        $(".pages_ul").empty();
        $.ajax({
            cache: false,
            async: false,
            dataType: 'json',
            type: 'POST',
            url: "/selfpage/"+text,//走自己的属性
            success: function (data) {
                var pagelist = data.list;
                var startPages = data.pageNum;
                sum_page = data.pages;
                var userName = sessionStorage.getItem("userName");
                var userId = sessionStorage.getItem("userId");
                //记入当前页数，作为全局变量
                current_page = startPages;
                for (var i = 0;i < pagelist.length;i++){
                    var pageinfo = pagelist[i];
                    var articleId = (pageinfo.articleId).toString();
                    $(".title_tables").append("<div class=\"container messages\"  >\n" +
                        "            <div class=\"row\">\n" +
                        "                <div class=\" col-md-10\">\n" +
                        "                    <div class=\"thumbnail\">\n" +
                        "                        <div class=\"caption message\">\n" +
                        "                            <br>\n" +
                        "                            <a href='/article?id="+ articleId +"' class=\"title\" style=\"text-align: center;\n" +
                        "                    display: block\" >" + pageinfo.header + "</a>\n" +
                        "                            <br/>\n" +
                        "                            <div class=\"context\">\n" +
                        "                                作者:<a class='pageNo' articleId='"+ articleId +"' userid='"+ userId +"' href=\"/bloger?id="+ userId +"\" >" + userName +'&nbsp&nbsp' + "</a>\n" +
                        "                                发表日期:<span>&nbsp6小时前&nbsp&nbsp </span>\n" +
                        "\n" +
                        "                                <a class='thumbs_href' style=\"display: inline-block\" index='"+i +"' title=\"点赞\">\n" +
                        "                                    <img class=\"thumbs_photo\" style=\"display: none\" src=\"image/thumbs_success.png\">\n" +
                        "                                    <img class=\"thumbs_photo\" style=\"display: inline-block\" src=\"image/thumbs-up.png\" >\n" +
                        "                                </a><span class='stars_num'>"+pageinfo.stars+"</span>\n" +
                        "                                 <a class='delete_passage delete_modal' data-toggle=\"modal\" data-target=\"#myModal\"><span class=\"glyphicon glyphicon-trash\">删除</span></a>\n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                    </div>\n" +
                        "                </div>\n" +
                        "            </div>\n" +
                        "\n" +
                        "        </div>")

                }
                //当显示为前3张，或者左后三张的时候
                if(startPages<=3 && data.pages <= 5){
                    page_tables(1,data.pages);
                }
                if(startPages<=3 && data.pages>5){
                    page_tables(1,5);
                }
                if(startPages>3 && data.pages - 2 < startPages){
                    //显示12345 显示左后五章不
                    page_tables(startPages-3,data.pages);
                }
                if(startPages>3 && data.pages - 2 >= startPages){
                    page_tables(startPages-2,startPages+2);
                }

            }
        });
    }

    function page_tables(startPages,pages) {
        $(".pages_ul").append(
            "        <li class=\"page_side_li page_first\" id=\"0\">\n" +
            "            <a aria-label=\"Previous\" >\n" +
            "                <span aria-hidden=\"true\">&laquo;</span>\n" +
            "            </a>\n" +
            "        </li>\n");
        for(var page = startPages;page <= pages;page++){
            console.log(page);

            if(page===current_page){
                $(".pages_ul").append(
                    "        <li class='active'><a class=\"page_li  page1\">"+ page +"</a></li>\n" +
                    "");
            }else{
                $(".pages_ul").append(
                    "        <li ><a class=\"page_li page1\">"+ page +"</a></li>\n" +
                    "");
            }
        }
        $(".pages_ul").append("<li class=\"page_side_li page_last\" id=\"-1\">\n" +
            "            <a aria-label=\"Next\">\n" +
            "                <span aria-hidden=\"true\">&raquo;</span>\n" +
            "            </a>\n" +
            "        </li>")
        //添加高亮

    }

    $(".pages_ul").on("click",".page_li",function () {
        var text = $(this).text();
        AjAx(text);
    })
    $(".pages_ul").on("click",".page_first",function () {
            // var text = $(this).attr("id");
            //向前翻页只有当，前一页存在时候
            if (current_page != 1) {
                AjAx(current_page - 1);
                $(".page_first").removeAttr("disabled")
            } else {
                $(".page_first").attr({"disabled": "disabled"});
            }
        }
    )
    $(".pages_ul").on("click",".page_last",function () {
        // var text = $(this).attr("id");
        //向前翻页只有当，前一页存在时候
        if(current_page === sum_page){
            $(".page_last").attr({"disabled": "disabled"});
        }
        if (current_page < sum_page) {
            AjAx(current_page + 1);
        } else {
            $(".page_last").removeAttr("disabled");
        }
    })

    //删除文章功能
    //首先要具备这个是个人的文章
    $(".title_tables").on("click",".delete_passage",function () {

        var text = $(this).parent().siblings(".title").text();
        var blogId = $(this).siblings(".pageNo").attr("articleId");
        var userId = $(this).siblings(".pageNo").attr("userId");
        $(".delete_passage_btn").attr("blogId",blogId);
        $(".delete_passage_btn").attr("userId",userId);
        //获取自定义属性的值，这个值就是他的blogId,以便我们取查找是否这个人具备删除这个文章的身份
        $("#to_check_delete").text("<<"+text+">>"+"这篇文章吗？").css("color","blue");
        $("#myModal").show("slow");
    })
    //确认删除
    $(".delete_passage_btn").click(function () {
        //得到这个文章的所欲信息
        var blogId = $(this).attr("blogId");
        var userId = $(this).attr("userId");
        //发送ajax请求
        check_to_delete(blogId,userId);
        //删除成功，刷新页面
        location.reload();
        return true;
    });
    function check_to_delete(blogId,userId){
        $.ajax({
            url: "/delete",
            type: "POST",
            data:{
                blogId:blogId,
                userId:userId
            },
            dataType: "JSON",
            success: function (data) {
                if(data==="success"){
                    alert("删除成功");
                    return false;
                }else{
                    alert(data);
                    $(".btn_close").click();
                    return true;
                }
            }
        })
    };
</script>
</html>